<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=device-dpi">
    <link rel='stylesheet' href='/home/stylesheets/base.css' />
    <link rel='stylesheet' href='/home/stylesheets/style.css' />
  </head>
  <body>
    <div class="wrap">
      <header>
        <img src="/home/images/banner.png" class="banner" alt="banner">
      </header>
      <section>
        <div class="content">
          <h4>投票选项</h4>
          <ul class="item-list">
            <% items.forEach(function(item){ %>
            <li class="item">
              <div class="item-img-frame">
                <img src="<%=item.img %>" class="item-img" alt="">
              </div>
              <h4 class="item-name"><%=item.title %></h4>
              <div class="item-info-frame">
                <p class="vote-num"><i><%=item.vote_num %></i> 票</p>
                <div class="vote-btn" data-id="<%=item._id %>">投票</div>
              </div>
            </li>
            <% }) %>
          </ul>
        </div>
        <%- include("./common/footer.ejs") %>
      </section>
    </div>
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
      var vote_id,vote_num,_this;
      $('.vote-btn').on('click', function(){
          _this = $(this);
          vote_id = _this.attr('data-id');
          vote_num = parseInt(_this.parents('.item-info-frame').find('.vote-num i').html());
          $.ajax({
              url: '/vote',
              type: 'post',
              data: {id: vote_id},
              dataType: 'json',
              success: function(data){
                  console.log(data);
                  alert(data.msg);
                  if(data.code == 1001){
//                      window.location.reload();
                      _this.parents('.item-info-frame').find('.vote-num i').html(vote_num+1);
                  }
              },
              error: function(){
                  console.log('error');
              }
          });
      });
    </script>
  </body>
</html>
